XHTML

Qu'est-ce que le XHTML?

Le HTML a été inventé par Tim Berners-Lee, alors qu'il travaillait pour le centre de recherche CERN en Suisse. L'intention de Berners-Lee était de proposer un système révolutionnaire de gestion de l'information qu'il appela World Wide Web. Comme pièce maîtresse de son architecture, il avait besoin d'un format de documents qu'il appela HTML (HyperText Markup Language). La première page web, dont l'adresse était http://nxoc01.cern.ch/hypertext/WWW/TheProject.html, vit le jour en 1990.

Le HTML est un langage à base de balises, un peu comme une application XML. En fait, il existe une application XML appelée XHTML, qui est à la fois du HTML et du XML. Le document que vous lisez en ce moment en est un exemple. En effet, le document que vous lisez est à la fois du XML bien formé et valable, mais aussi du HTML.

Rappelons qu'une « application XML » est un ensemble de balises et d'attributs, c'est-à-dire un vocabulaire XML, avec des conventions d'usage dont certaines peuvent être représentées par un document DTD.

La très grande majorité des documents sur le web sont écrits en HTML et, de plus en plus, en XHTML. Une des raisons principales de l'utilisation du XHTML, c'est que les outils qui traitent le XML peuvent aussi traiter du XHTML puisque ce dernier est aussi du XML. Il est donc possible, dans une organisation, de combiner le contenu web (HTML) avec le stockage des informations en XML. Comme nous le verrons plus tard dans le cours (module 3, section portant sur le XSLT), on peut même transformer automatiquement le XML en XHTML.

Si on dit « HTML » tout court, ce n'est pas nécessairement du XML et il se peut que les outils conçus pour le XML ne puissent être utilisés pour le traiter. Cependant, si on dit « XHTML », alors il s'agit à la fois de HTML et de XML et on peut utiliser les outils destinés au XML pour en traiter le contenu. Voici quelques différences entre le HTML et le XHTML :

Les serveurs web distinguent le contenu en fournissant aux navigateurs différents codes MIME (Multipurpose Internet Mail Extensions), alors que le HTML a le code MIME « text/html », on utilise le code MIME « application/xml » ou « application/xhtml+xml » pour le XHTML. Avec le serveur web Apache, on obtient le résultat désiré en ajoutant un fichier « .htaccess », dans le même répertoire que nos fichiers XHTML, contenant la ligne « AddType application/xml .xhtml ».

En HTML traditionnel, on n'a pas à fermer les éléments. Ainsi, le code suivant « texte » est acceptable en HTML, mais en XHTML, il faut écrire «
```
texte ».
```
Les valeurs d'attributs en HTML n'ont pas à être entre des guillemets ou apostrophes. Ainsi, le code « <table border=0> » est acceptable en HTML, mais en XHTML, il faut écrire « <table border="0"> ».
En HTML, la casse des noms est sans importance. Ainsi, on peut remplacer « » par « », alors que ce n'est pas permis en XHTML.

Dans ce cours, nous nous intéresserons surtout au XHTML. Un document XHTML prend la forme suivante :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon document</title>
</head>
<body>
Voici mon document.
</body>
</html>

On reconnaît d'abord la déclaration XML qui n'a rien de particulier : <?xml version="1.0" encoding="ISO-8859-1" ?>. Comme pour tout document XML, on peut omettre la déclaration XML d'un document XHTML, mais si nous voulons écrire en français avec des lettres accentuées, il est nettement préférable d'avoir la déclaration XML de notre exemple.

On reconnaît ensuite la déclaration de type de document : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">. Observez qu'elle apparaît sur deux lignes, que c'est souvent le cas, mais que c'est un choix purement esthétique. La déclaration de type de document est un peu particulière : il s'agit d'une déclaration utilisant un identifiant public. On doit utiliser un tel identifiant quand on veut signifier qu'il s'agit d'une application XML commune; on évite ainsi que des milliers de personnes aillent chercher des documents DTD à l'adresse « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ». On s'attend qu'un logiciel qui dépend d'une application XML commune n'ait pas besoin d'aller chercher les documents DTD, chaque fois que le document XML est lu. Un navigateur ne tient généralement pas compte de la DTD externe, on peut donc omettre la déclaration DOCTYPE sans problème.

Le reste du document est simplement un élément-racine « html » contenant deux éléments : un élément head et un élément body. L'élément head doit contenir un élément title, alors que l'élément body peut être vide, mais peut aussi posséder du contenu XML mixte (texte et diverses balises XHTML). L'espace de nom ayant l'URI « http://www.w3.org/1999/xhtml » est utilisé.

Si vous copiez le texte qui précède dans un éditeur de texte comme Bloc-notes et que vous enregistrez le fichier sous un nom comme « test.xhtml », vous devriez être capable d'ouvrir le fichier dans votre navigateur et de voir le texte « Voici mon document. » s'afficher à l'écran. Les documents HTML sont tous des documents en format texte et l'extension du fichier est arbitraire : on utilise tout aussi bien « .htm » que « .html », « .xhtml » ou même « .xml ». L'avantage de l'extension « .xhtml » est d'informer le navigateur qu'il s'agit d'un document XHTML, donc un document HTML et un document XML.

La structure du document XHTML : head et body

Comme nous le disions, l'élément-racine d'un document XHTML est nommé « html ». Cet élément contient deux et exactement deux sous-éléments : head et body. L'élément head n'est pas affiché directement dans le navigateur et contient des métadonnées, c'est-à-dire une description du contenu. Un élément head doit au minimum contenir un élément title qui donne le titre du document XHTML. Par la suite, l'élément body contient un ensemble de balises et du texte (contenu mixte) qui sera affiché directement dans le navigateur.

Les paragraphes en HTML

L'élément body contient des balises et du texte. Les retours de ligne sont traités comme des espaces normaux. Ainsi, les deux documents suivants seront affichés de la même manière par un navigateur.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon document</title>
</head>
<body>
Voici mon document.
Voici ma vie.
Voici mon chat.
</body>
</html>

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon document</title>
</head>
<body>
Voici mon document.

Voici ma vie.

Voici mon chat.
</body>
</html>

La question qui se pose alors est : Comment faire des paragraphes? En effet, dans les deux documents plus haut, le texte s'affichera sur une seule ligne (vous pouvez le tester!). La solution consiste à utiliser l'élément « p » pour « paragraphe ». Pour avoir trois paragraphes, on remplace le document HTML précédent par celui qui suit. Observez que chaque balise « p » ouverte doit être fermée.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon document</title>
</head>
<body>
<p>Voici mon document.</p>
<p>Voici ma vie.</p>
<p>Voici mon chat.</p>
</body>
</html>

Les listes en HTML

Supposons que l'on veuille faire une liste, comme ceci :

Premier point : le chat est noir.
Second point : le chat est blanc.
Dernier point : le chat est marron.

On peut obtenir ce résultat avec un élément « ul » pour unordered list (liste sans ordre), contenant des éléments « li ». Observez que chaque balise « li » ouverte doit être fermée.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon document</title>
</head>
<body>
<ul>
<li>Premier point: le chat est noir.</li>
<li>Second point: le chat est blanc.</li>
<li>Dernier point: le chat est marron.</li>
</ul>
</body>
</html>

Supposons maintenant que nous voulions une liste avec un compteur :

Le chat est noir.
Le chat est blanc.
Le chat est marron.

Il suffit alors de remplacer l'élément « ul » par l'élément « ol » pour ordered list (liste ordonnée) :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon document</title>
</head>
<body>
<ol>
<li>Le chat est noir.</li>
<li>Le chat est blanc.</li>
<li>Le chat est marron.</li>
</ol>
</body>
</html>

Les tableaux en HTML

Supposons maintenant que nous voulions produire un tableau. On peut l'obtenir à l'aide d'un élément « table ». Cet élément contiendra plusieurs éléments « tr » (éléments correspondant à une ligne) qui eux-mêmes contiennent des éléments « td » (éléments correspondant à une cellule). Ainsi, pour obtenir un tableau comme celui-ci :

Nom	Valeur
Mustang	50 $
Ferrari	500 $

On utilise le code suivant :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon document</title>
</head>
<body>
<table>
<tr>
<td>Nom</td>
<td>Valeur</td>
</tr>
<tr>
<td>Mustang</td>
<td>50 $</td>
</tr>
<tr>
<td>Ferrari</td>
<td>500 $</td>
</tr>
</table>
</body>
</html>

Supposons maintenant que l'on veuille un tableau avec des lignes pour marquer et diviser les cellules. Il suffit alors d'utiliser l'attribut « border ». Sa valeur numérique représente l'épaisseur en pixels de la bordure. Ainsi, pour obtenir ce résultat :

Nom	Valeur
Mustang	50 $
Ferrari	500 $

On utilisera le code XHTML suivant :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon document</title>
</head>
<body>
<table border="1">
<tr>
<td>Nom</td>
<td>Valeur</td>
</tr>
<tr>
<td>Mustang</td>
<td>50 $</td>
</tr>
<tr>
<td>Ferrari</td>
<td>500 $</td>
</tr>
</table>
</body>
</html>

Tous les tableaux ne sont pas si simples. On peut faire en sorte qu'une même cellule occupe deux colonnes (<td colspan="2">) ou deux rangées (<td rowspan="2">). Aussi, souvent, on utilise l'élément « th » au lieu de l'élément « td » pour désigner la première rangée d'un tableau lorsque celle-ci forme l'entête descriptive du tableau. Il est aussi possible d'utiliser un élément « caption » au sein d'un tableau pour noter le titre du tableau :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon document</title>
</head>
<body>
<table border="1">
<caption>Valeur de différents véhicule</caption>
<tr>
<th>Nom</th>
<th>Valeur</th>
</tr>
<tr>
<td>Mustang</td>
<td>50 $</td>
</tr>
<tr>
<td>Ferrari</td>
<td>500 $</td>
</tr>
</table>
</body>
</html>

Les caractères italiques et gras

On peut très facilement utiliser des effets de polices de caractères en HTML. Pour obtenir des caractères en italique, par exemple maman, il suffit d'utiliser un élément « i » comme ceci : maman. Pour des caractères en gras, comme maman, il suffit d'utiliser un élément « b » comme ceci : maman. On peut également combiner les deux, comme maman, en écrivant maman ou bien maman. Il est cependant préférable d'utiliser « em » (emphase) au lieu de « i » et « strong » (fort) au lieu de « b » : le navigateur choisira alors de rendre le texte dans un élément « em » avec un italique ou une autre technique appropriée, et de rendre le texte dans un élément « strong » en caractères gras ou une autre technique appropriée. On évite ainsi de confondre la présentation (italique ou gras) et la sémantique (emphase ou point fort). Dans le cas où un terme est défini, vous devriez utiliser un élément « dfn » (définition) comme dans cet exemple: « La <dfn>mort</dfn> est la fin de la vie ». La plupart des navigateurs afficheront alors le mot « mort » en caratères italiques.

Les listes de définitions

Supposons que nous voulions une liste de définitions comme celle qui suit :

Voiture: Véhicule sur roues.
Chat: Bête sauvage qui se nourrit de lait.
Éléphant: Bête sauvage de couleur rose.

On obtient ce résultat en XHTML avec un élément « dl » pour definition list contenant une série d'éléments « dt » et « dd » en paire, où l'élément « dt » fournit le terme à définir et l'élément « dd » sa définition.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de mon document</title>
</head>
<body>
<dl>
<dt>Voiture</dt>
<dd>Véhicule sur roues. </dd>
<dt>Chat</dt>
<dd>Bête sauvage qui se nourrit de lait. </dd>
<dt>Éléphant</dt>
<dd>Bête sauvage de couleur rose. </dd>
</dl>
</body>
</html>

Les lignes horizontales

Pour obtenir une ligne horizontale, on utilise l'élément « hr » qui doit être vide. On doit donc écrire <hr></hr> ou plus simplement <hr />. Voici une ligne horizontale :

Les images

Au moment d'écrire ces lignes, on trouve un logo de l'UQAM à l'URL

https://upload.wikimedia.org/wikipedia/commons/2/24/Université_du_Québec_à_Montréal_Logo.svg.

Pour insérer une image dans un document HTML, il suffit d'utiliser une balise « img » avec comme attribut « src » pour source, soit l'URL. Par exemple, le code

<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Université_du_Québec_à_Montréal_Logo.svg">

<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Université_du_Québec_à_Montréal_Logo.svg" />

permettra d'insérer le logo de l'UQAM dans un document. Il est préférable de prévoir que l'image pourrait ne pas être trouvée ou affichée en ajoutant un attribut « alt » qui contient du texte décrivant le contenu de l'image; si l'image n'est pas disponible, le texte contenu dans l'attribut « alt » s'affichera. Le résultat final prend la forme <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Université_du_Québec_à_Montréal_Logo.svg" alt="logo de l'UQAM" /> ce qui donne :

Les hyperliens

Pour inclure un hyperlien, comme dans l'exemple de la page de l'UQAM [lien vers http://www.uqam.ca/], il suffit d'utiliser la syntaxe « <a href="http://www.uqam.ca/">page de l'UQAM ».

On peut également ajouter des marqueurs dans une page web en utilisant la syntaxe « <a name="point1">Premier point de mon document</a> ». Contrairement à la syntaxe « <a href="..."> », l'attribut « name » n'ajoute pas un hyperlien, mais un marqueur généralement invisible dans la page. Par exemple, si la page contient plusieurs sections, on peut ajouter un marqueur au début de chaque section. On pourra alors faire des liens non seulement vers le document, mais aussi vers la section marquée dans le document. Ainsi, l'hyperlien « <a href="pageweb.html#point1">aller vers le premier point du document pageweb.html</a> » mènera l'utilisateur dans le document « pageweb.html », précisément au marqueur du « point 1 », s'il existe, évidemment.

Les abbréviations

On utilise parfois des abbréviations dans une page web tel que « etc. » ou « no ». On peut indiquer au navigateur qu'il s'agit d'une abbréviation avec un élément abbr comme ceci : « <abbr>no</abbr> ». Il est parfois utile d'utiliser l'attribut « title » pour décrire l'abbréviation en question comme dans ceci : « <abbr title="numéro">no</abbr> ». De la même façon, on peut noter les acronymes avec un élément « acronym » comme ceci : « <acronym title="Organisation du traité de l'Atlantique Nord">OTAN</acronym> ».

Les adresses

Il est fréquent qu'une page web contienne un adresse. Le XHTML nous permet d'indiquer au navigateur qu'il s'agit bien d'une adresse avec l'élément « address », comme ceci : « <address> Daniel Lemire 100, rue Sherbrooke </address> ». Ici, l'élément « br » sert à noter un retour de charriot.

Les indices et exposants

Dans un texte, il arrive qu'on veuille utiliser des exposants et des indices. Les éléments « sup » et « sub » servent à cette fonction. Par exemple, « premier » peut s'écrit « 1^er ». Il n'est malheureusement pas possible de noter automatiquement des notes en bas de page en HTML ou XHTML.

Le code et les exemples

Il y a plusieurs éléments permettant de traiter de la programmation informatique ou des mathématiques. Le code informatique peut s'écrire dans un élément « code ». Le texte saisi à l'écran par un utilisateur peut s'écrire dans un élément « kbd ». Les exemples de sortie à l'écran peuvent s'écrire dans un élément « samp » (pour sample) et les variables peuvent s'écrire dans un élément « var ». Voici un exemple : « La valeur de la variable <var>i</var> est obtenue avec ce code:<code>int i = 1; i+=1</code>On s'attend à ce que l'utilisateur tape <kbd>Yes</kbd> pour oui. Voici un exemple de résultat: <samp>Error!</samp>. ».

Les citations

Pour citer quelqu'un, on peut utiliser un élément « q » lorsqu'il s'agit d'un courte citation au sein d'un paragraphe ou élément « blockquote » lorsque la citation doit former un court paragraphe. Plusieurs navigateur mettent automatiquement le contenu de l'élément « q » entre guillemets et le contenu de l'élément « blockquote » en retrait. Voici un exemple : « Jean a dit: <q>mon cher!</q>. Par la suite, je lui ai lu ce texte fatidique.<blockquote>Oh! Comme la mer a merée! Oh! Comme j'ai jéjé!</blockquote> ».

Les révisions

Les éléments del et ins permettent de noter un retrait et un ajout, respectivement, comme dans cet exemple:

J'ai <del>marié</del><ins>épousé</ins> ta mère

Le navigateur se chargera d'afficher les retraits et les ajouts de manière compréhensible.

La langue

Le XHTML respecte la spécification XML voulant qu'on indique la langue dans laquelle est écrite un texte avec l'attribute « xml:lang ». Cet attribut est optionnel, mais peut s'avérer pratique. Dans le cas où un texte en langue étrangère est présent dans un paragraphe, on peut utiliser l'élément « span » pour en indiquer la langue. Voici un exemple : « Jean aime les computers ». L'élément « span » ne sert qu'à nous permettre de sélectionner un texte au sein d'un autre élément.

Les commentaires

Ajouter des commentaires en XHTML est facile. Les commentaires du XML s'appliquent: il suffit de débuter le commentaire par . Il n'est pas permis d'inclure au sein d'un commentaire deux tirets (--) ni de terminer un commentaire par un tiret.

Séparation du contenu et de la présentation

Avec le XHTML, on peut contrôler en partie l'apparence du texte, en utilisant des italiques ou en plaçant des bordures dans nos tableaux. Ce contrôle est cependant limité : on ne peut pas ajuster l'indentation des paragraphes et on ne peut que difficilement ajuster les marges de la page. Nous verrons au module 3, dans la section sur le CSS, qu'il existe une façon élégante d'y arriver.

Convertir du HTML mal formé

Dans une organisation, il est fréquent d'avoir à composer avec des sites web qui ne respectent pas les normes les plus élémentaires. Réécrire le HTML en XHTML peut sembler une tâche très ardue. Heureusement, il existe des outils gratuits pour corriger du HTML mal formé et générer automatiquement un XHTML valable, comme par exemple HTMLTidy (http://tidy.sourceforge.net/). Le W3C rend aussi disponible un outil de vérification en ligne des sites web pour s'assurer de leur conformité avec les normes (http://validator.w3.org/). Vous pourrez facilement constater que plusieurs pages à l'UQAM ne sont pas du HTML valable, y compris certaines pages web de ce cours !

Spécification Relax NG

Il existe des définitions de type de document officielle pour le XHML, mais elles sont longues et peu lisible. Sean B. Palmer a écrit une spécification Relax NG pour un sous-ensemble du XHTML que je reproduis ici avec permission. Je vous invite à vérifier que vous pouvez en comprendre l'essentiel.

default namespace html = "http://www.w3.org/1999/xhtml"

# Common Attributes

Core.attrs = 
   attribute id { xsd:ID }?,
   attribute class { text }?,
   attribute style { text }?, 
   attribute title { text }?

I18n.attrs = 
   attribute xml:lang { text }?,
   attribute dir { "ltr" | "rtl" }?

Main.attrs = 
   Core.attrs, I18n.attrs, 
   attribute onclick { text }?

# Content Models

BlockMinusForm = 
   (address | blockquote | del | div.elem | dl | h1 | h2 | 
    h3 | hr | ins | ol | p | pre | script | table | ul)*
Block = (BlockMinusForm | form)*

InlineMinusMedia = 
   (a | abbr | br | cite | code | del | em | input | ins | 
    label | script | span | strong | sub | sup | textarea | text)*
Inline = (InlineMinusMedia | img | object)*

Flow = (Block | Inline)*

# Elements

start = html

html = element html { 
   I18n.attrs, 
   head, body
}

head = element head { 
   I18n.attrs, 
   attribute profile { text }?, 
   title, base?, (script* & style* & meta* & link*)
}

title = element title { 
   I18n.attrs, 
   text
}

base = element base { 
   attribute href { text }, 
   empty
}

meta = element meta { 
   I18n.attrs, 
   attribute content { text }?, 
   attribute name { text }?, 
   empty
}

link = element link { 
   Main.attrs, 
   attribute href { text }?, 
   attribute rel { text }?, 
   attribute type { text }?, 
   empty
}

style = element style { 
   I18n.attrs, 
   attribute type { text }, 
   attribute title { text }?, 
   text
}

script = element script { 
   attribute type { text }, 
   attribute src { text }?, 
   text
}

body = element body { 
   Main.attrs, 
   attribute onload { text }?, 
   Block
}

div.elem = element div { 
   Main.attrs, 
   Flow
}

p = element p { 
   Main.attrs, 
   Inline
}

h1 = element h1 { 
   Main.attrs, 
   Inline
}

h2 = element h2 { 
   Main.attrs, 
   Inline
}

h3 = element h3 { 
   Main.attrs, 
   Inline
}

ul = element ul { 
   Main.attrs, 
   li+
}

ol = element ol {
   Main.attrs, 
   li+
}

li = element li {
   Main.attrs, 
   Flow
}

dl = element dl { 
   Main.attrs, 
   (dt, dd+)+
}

dt = element dt { 
   Main.attrs, 
   Inline
}

dd = element dd { 
   Main.attrs, 
   Flow
}

address = element address { 
   Main.attrs, 
   Inline
}

hr = element hr { 
   Main.attrs, 
   empty
}

pre = element pre { 
   Main.attrs, 
   InlineMinusMedia
}

blockquote = element blockquote { 
   Main.attrs, 
   attribute cite { text }?, 
   Block
}

ins = element ins { 
   Main.attrs, 
   attribute cite { text }?, 
   Flow
}

del = element del { 
   Main.attrs, 
   attribute cite { text }?, 
   Flow
}

a = element a { 
   Main.attrs, 
   attribute href { text }?, 
   attribute rel { text }?, 
   (text & img* & span*)
}

span = element span { 
   Main.attrs, 
   Inline
}

br = element br { 
   Core.attrs, 
   empty
}

em = element em { 
   Main.attrs, 
   Inline
}

strong = element strong { 
   Main.attrs, 
   Inline
}

code = element code { 
   Main.attrs, 
   Inline
}

cite = element cite { 
   Main.attrs, 
   Inline
}

abbr = element abbr { 
   Main.attrs, 
   Inline
}

sub = element sub { 
   Main.attrs, 
   Inline
}

sup = element sup { 
   Main.attrs, 
   Inline
}

object = element object { 
   Main.attrs, 
   attribute data { text }?, 
   attribute type { text }?, 
   Flow
}

img = element img { 
   Main.attrs, 
   attribute alt { text }, 
   attribute src { text }, 
   attribute height { text }?, 
   attribute width { text }?, 
   empty
}

form = element form { 
   Main.attrs, 
   attribute action { text }, 
   attribute method { text }?, 
   BlockMinusForm
}

label = element label { 
   Main.attrs
}

input = element input { 
   Main.attrs, 
   attribute type { "text" | "submit" | "hidden" }, 
   attribute name { text }?, 
   attribute size { text }?, 
   attribute value { text }?, 
   empty
}

textarea = element textarea { 
   Main.attrs, 
   attribute cols { text }, 
   attribute rows { text }, 
   attribute name { text }?, 
   text
}

table = element table { 
   Main.attrs, 
   caption?, tr+
}

caption = element caption { 
   Main.attrs, 
   Inline
}

tr = element tr { 
   Main.attrs, 
   (th | td)+
}

th = element th { 
   Main.attrs, 
   Flow
}

td = element td { 
   Main.attrs, 
   Flow
}

Conclusion

Le XHTML est un vocabulaire XML. Vous pouvez en consulter la DTD en ligne, à l'adresse http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd; il ne s'agit pas d'une DTD facile à lire, mais elle est néanmoins disponible. Notez qu'il existe de très bons livres de référence pour approfondir le XHTML, mais pour ce cours, il suffit de connaître les quelques balises présentées dans ce document.

Un des avantages importants du XHTML sur des pages web traditionnelles (souvent mal formées) est qu'on peut facilement traiter des pages XHTML avec des outils destinés au XML. En somme, on peut plus facilement extraire et traiter l'information d'une page XHTML que l'on peut le faire d'une page HTML mal formée.

Livres de référence

Jennifer Robbins, HTML and XHTML Pocket Reference, O'Reilly Media, 2006, 97 pages.
Jean Engels, XHTML et css : cours et exercices, Eyrolles, 2006.

Activité d'autoévaluation

Afin de vous assurez d'avoir bien compris les notions présentées dans cette leçon, vous devez créer un document XHTML valable, utilisant les différents éléments que nous avons étudiés. Afin que votre navigateur reconnaisse le document comme étant du XHTML, vous devriez utiliser l'extension « xhtml ». Si vous déposez le fichier sur un serveur web Apache, il peut être nécessaire de créer aussi un fichier « .htaccess » et de le déposer dans le même répertoire que votre fichier XHTML afin que le serveur puisse reconnaître les fichiers XHTML. Votre fichier « .htaccess » pourrait avoir le contenu suivant :

DirectoryIndex index.xhtml index.html index.php index.pl index.cgi
AddType application/xml .xhtml

RECHERCHE